<template>
	<uni-notice-bar background-color="#FFF5E5" color="#E1835B" single text="请务必按要求设置，否则将审核失败！"></uni-notice-bar>
	<form class="form" @submit="sub">
		<!-- 头像上传 -->
		<view class="form-item">
			<view class="form-title form-img" @click="chooseImage">
				<view class="label">
					<text class="red">*</text>
					你的形象
				</view>
				<view class="image-item">
					<lazy-load-image class="avatar" :image="data.formData.dataNewImg" :errorImg="config.errorImage.avator" imgMode="aspectFill" height="110rpx" borderRadius="55" />
					<icon class="iconfont icon">&#xe7d3;</icon>
				</view>
			</view>
			<view class="form-control form-img-control">
				<input class="input" type="text" v-model="data.formData.dataNewImg" name="dataNewImg" placeholder="请上传头像" placeholder-class="placeholderStyle" />
			</view>
		</view>
		<!-- 技能简述 -->
		<view class="form-item">
			<view class="form-title">
				<view class="label">
					<text class="red">*</text>
					技能简述
				</view>
				<view class="value">{{ data.formData.businessname.length }}/36</view>
			</view>
			<view class="form-control">
				<input
					class="input"
					type="text"
					maxlength="36"
					v-model="data.formData.businessname"
					name="businessname"
					placeholder="请填写技能简述（2-36个字）"
					placeholder-class="placeholderStyle"
				/>
			</view>
		</view>
		<!-- 能力描述 -->
		<view class="form-item">
			<view class="form-title">
				<view class="label">
					<text class="red">*</text>
					能力描述
				</view>
				<view class="value">{{ data.formData.introduce.length }}/240</view>
			</view>
			<view class="form-control">
				<textarea
					class="textarea"
					maxlength="240"
					v-model="data.formData.introduce"
					name="introduce"
					placeholder="专注于文案的个性定制，修改，润色等，具有扎实的文案功底，可承接演讲稿、读后感、任务计划书、营销方案等多方面的工作。"
					placeholder-class="placeholderStyle"
				></textarea>
			</view>
		</view>
		<view v-show="data.trial === '2'" class="tips">{{ data.trial_reason }}</view>
		<view class="form-submit">
			<button v-if="data.trial !== '0'" :disabled="isDisabled" class="btn btn-sub btn-sr" :class="isDisabled ? 'btn-dis' : ''" form-type="submit" hover-class="btnClickStyle">
				提交
			</button>
			<button v-if="data.trial === '0'" class="btn btn-sub btn-dis btn-sr" form-type="submit" disabled hover-class="btnClickStyle">审核中</button>
		</view>
	</form>
	<!-- 提交确定弹窗 -->
	<popup-submit ref="popupSubmitRef"></popup-submit>
</template>

<script setup>
import { ref, reactive, computed, defineComponent } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { valid } from '@/subpages/common/utils/valid.js';
import { useStore } from 'vuex';
import { getBusinessInfo } from '@/subpages/common/api/set.js';
import popupSubmit from './components/popup-submit.vue';
import { uploadImg } from '@/subpages/common/api/upload.js';
import { updateAvator, updateImInfos } from '@/subpages/common/api/customer/info.js';
import { isEmpty } from '@/common/utils/index.js';
import { showModal } from '@/common/hooks/useShow.js';
import config from '@/uni.config.js';
const store = useStore();
const popupSubmitRef = ref(null);
const data = reactive({
	formData: {
		dataNewImg: '',
		businessname: '',
		introduce: ''
	},
	oldData: {
		dataNewImg: '',
		businessname: '',
		introduce: ''
	},
	trial_reason: '',
	trial: null
});
const isDisabled = computed(() => {
	return (
		isEmpty(data.formData.businessname) ||
		isEmpty(data.formData.introduce) ||
		(data.formData.businessname === data.oldData.businessname && data.formData.introduce === data.oldData.introduce)
	);
});

defineComponent({
	popupSubmit
});
onLoad(options => {
	data.trial = options.trial;
	getBusinessInfoRequest();
});
//头像选择
function chooseImage() {
	uni.chooseImage({
		count: 1,
		crop: {
			width: 600,
			height: 600
		},
		success(res) {
			const size = +res.tempFiles[0].size / 1024 / 1024;
			if (size > config.file.uploadSize) {
				showModal({
					content: `建议上传小于${config.file.uploadSize}M尺寸为100*100的图片`,
					showCancel: false
				});
			} else {
				let newData = [
					{
						type: 'head',
						fileUrl: res.tempFiles[0].path
					}
				];
				uploadImg(newData)
					.then(async uploadRes => {
						data.formData.dataNewImg = uploadRes[0].src;
						updateImInfos({ faceurl: uploadRes[0].src });
						await updateAvator({
							avatar: uploadRes[0].src
						});
						store.dispatch('app/init');
					})
					.catch(error => {
						console.log(error, 'error');
					});
			}
		}
	});
}
//提交表单验证
function sub(e) {
	const subData = e.detail.value;
	let rules = [
		{
			value: subData.dataNewImg,
			null: '请上传你的形象',
			error: '请上传你的形象'
		},
		{
			value: subData.businessname,
			null: '请填写技能简述（2-36个字）',
			dataType: '2&36',
			error: '请填写技能简述（2-36个字）'
		},
		{
			value: subData.introduce,
			null: '请填写能力描述（10-240个字）',
			dataType: '10&240',
			error: '请填写能力描述（10-240个字）'
		}
	];

	const dataTypes = { dataTypes: { '2&36': /^[\w\W]{2,36}$/, '10&240': /^[\w\W]{10,240}$/ }, tip: 1 };

	valid(rules, dataTypes).then(res => {
		popupSubmitRef.value.open(subData);
	});
}
//获取基本信息
async function getBusinessInfoRequest() {
	const res = await getBusinessInfo();
	data.formData.introduce = res.data.introduce;
	data.formData.businessname = res.data.nickname;
	data.formData.dataNewImg = res.data.memberInfo.avatar;

	data.oldData.dataNewImg = res.data.memberInfo.avatar;
	data.oldData.introduce = res.data.introduce;
	data.oldData.businessname = res.data.nickname;

	data.trial_reason = res.data.trial_reason;
}
</script>

<style lang="scss">
@import '@/common/css/base.scss';
page {
	background-color: $bgColor;
}
</style>
<style scoped lang="scss">
@import '@/common/css/base.scss';
@import '@/common/css/form.scss';
.form-img-control {
	display: none;
}
.tips {
	padding-top: 28rpx;
	font-size: 24rpx;
	color: #ff0000;
}
.form-submit {
	position: relative;
	margin-top: 50rpx;
	box-shadow: none;
	background-color: transparent;
}
.form-img {
	height: 170rpx;
	border: 0;
	.image-item {
		display: flex;
		align-items: center;
		padding: 30rpx 0;
		.avatar {
			display: inline-block;
			width: 110rpx;
			height: 110rpx;
			border-radius: 50%;
			overflow: hidden;
		}
		.icon {
			display: inline-block;
			margin-left: 22rpx;
			height: 110rpx;
			line-height: 110rpx;
			color: #aaa;
		}
	}
}
</style>
